import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { AppGlobalService } from '../../shared/service/app-global.service';
import { HttpService } from 'src/app/shared/service/http.service';
import { EventService } from 'src/app/shared/service/event.service';
import { ModalController } from '@ionic/angular';
import { BusinessModalComponent } from '../business-modal/business-modal.component';
declare let $: any;

@Component({
  selector: 'app-operational-help',
  templateUrl: './operational-help.component.html',
  styleUrls: ['./operational-help.component.scss'],
})
export class OperationalHelpComponent implements OnInit {
  @Input() tagData: any;
  listdata: any;
  unfoldshow: any;
  imgsrc: any;
  modalId:any;
  cssStr = {}; // 传入样式
  @ViewChild('divheight') elementView: ElementRef;
  viewHeight: number;
  constructor(
    private appGlobalService: AppGlobalService,
    private httpService: HttpService,
    private eventService: EventService,
    private modalController: ModalController) { }

  ngOnInit() {
    this.modalId = 'id' + new Date().getTime();
    /*  this.tagData = {
       "type": "tag",
       "style": "appOperationalHelp",
       "name": "appMeIconTag",
       "linearLayout": "body",
       "data": {
         "data": {
           "showSize": "3",
           "data": [
             {
               "icon": "../../../assets/img/home_business_icon-zrcz.png",
               "link": {
                 "type": "page",
                 "params": {
                   "plugin_id": "1,2",
                   "showName": "#transfer_myBusiness"
                 },
                 "target": "157676"
               },
               "iconBack": "../../../assets/img/map_icon_next@3x.png",
               "title": "转让:",
               "label1": "0须及时跟进",
               "label2": "0须及时跟进"
             },
             {
               "icon": "../../../assets/img/home_business_icon-xz.png",
               "link": {
                 "type": "page",
                 "params": {
                   "plugin_id": "1,2",
                   "showName": "#transfer_myBusiness"
                 },
                 "target": "157676"
               },
               "iconBack": "../../../assets/img/map_icon_next@3x.png",
               "title": "选址",
               "label1": "3须及时跟进",
               "label2": "3须及时跟进"
             },
             {
               "icon": "../../../assets/img/home_business_icon-zx.png",
               "link": {
                 "type": "page",
                 "params": {
                   "plugin_id": "1,2",
                   "showName": "#transfer_myBusiness"
                 },
                 "target": "157676"
               },
               "iconBack": "../../../assets/img/map_icon_next@3x.png",
               "title": "装修",
               "label1": "3须及时跟进",
               "label2": "3须及时跟进"
             },
             {
               "service": true,
               "icon": "../../../assets/img/home_business_icon-xmjm.png",
               "link": {
                 "type": "page",
                 "params": {
                   "plugin_id": "1,2",
                   "showName": "#transfer_myBusiness"
                 },
                 "target": "157676"
               },
               "iconBack": "../../../assets/img/map_icon_next@3x.png",
               "title": "加盟服务",
               "label1": "3须及时跟进",
               "label2": "3须及时跟进"
             },
             {
               "service": true,
               "icon": "../../../assets/img/home_business_icon-xmjm.png",
               "link": {
                 "type": "page",
                 "params": {
                   "plugin_id": "1,2",
                   "showName": "#transfer_myBusiness"
                 },
                 "target": "157676"
               },
               "iconBack": "../../../assets/img/map_icon_next@3x.png",
               "title": "项目服务",
               "label1": "3须及时跟进",
               "label2": "3须及时跟进"
             }
           ],
           "background": "margin-top:-50px,padding-top:1.25rem,margin-bottom:0.63rem,box-shadow:none",
           "title": "业务|协助",
           "rightLabel": {
             "data": [
               {
                 "background": "background",
                 "icon": "../../../assets/img/home_icon.png",
                 "cssStyle": "cssStyle2",
                 "link": {
                   "type": "page",
                   "params": {
                     "plugin_id": "1,2",
                     "showName": "#transfer_myBusiness"
                   },
                   "target": "157676"
                 },
                 "label": "做服务，推荐客户撮合成交",
                 "iconBack": "../../../assets/img/center_icon_arrow.png"
               }
             ]
           }
         }
       }
     }, */
    this.listdata = this.tagData.data.data;
    this.dataregroup();
    this.unfoldshow = true;
    this.imgsrc = "../../../assets/img/home_business_arrow-down.png";
    if (this.listdata.background) {
      const cssStyles = this.listdata.background.split(";");
      cssStyles.map(v => {
        const cssStrs = v.split(":");
        this.cssStr[cssStrs[0]] = cssStrs[1];
      });
    }
  }
  // 折叠部分
  unfold() {
    this.unfoldshow = !this.unfoldshow;
    if (this.unfoldshow === false) {
      this.listdata.data.forEach((element, index) => {
        element.show = true;
      });
      /* this.viewHeight = this.elementView.nativeElement.offsetHeight;
      console.log(this.viewHeight); // 224
      let viewHeights = document.getElementById('divheight');
      console.log(viewHeights.offsetHeight); // 224 */
      this.imgsrc = "../../../assets/img/home_business_arrow-up.png";
      // localStorage.setItem('tab1ScrollToBottomTag', '80');
      // this.eventService.eventEmit.emit('tab1ScrollToBottom', '1');
      $('#'+this.modalId).slideToggle("slow");
    } else {
      this.dataregroup();
      this.imgsrc = "../../../assets/img/home_business_arrow-down.png";
      $('#'+this.modalId).slideToggle("slow");
    }
  }
  // 折叠时数据重组一下
  dataregroup() {
    this.listdata.data.forEach((element, index) => {
      if (index <= 2) {
        element.show = true;
      } else {
        element.show = false;
      }
    });
  }
  // 点击跳转
  opengo(obj, type) {
    if (type == 1) {
      if (obj) {
        const pageParams = {
          pageId: obj.target,
          params: obj.params,
          sessionId: localStorage.getItem('sessionId')
        };
        this.httpService.post("application/page", pageParams, async res => {
          const tagData = JSON.parse(res.script).views[0].tags[0].data;
          const modal = await this.modalController.create({
            showBackdrop: true,
            cssClass: "recommend-modal-auto-heigth",
            component: BusinessModalComponent,
            animated:false,
            componentProps: { tagData }
          });
          await modal.present();
          // 监听销毁的事件
          await modal.onDidDismiss();
        });
      }
    } else {
      if (obj) {
        const pageParams = {
          pageId: obj.target,
          params: obj.params,
          sessionId: localStorage.getItem('sessionId')
        };
        console.log(pageParams);
        this.appGlobalService.goToForward(pageParams);
      }
    }
  }

  getNgStyle(str) {
    try {
      return JSON.parse(str);
    } catch (error) {
      return {};
    }
  }
}
